<script setup>
import {ref, reactive} from 'vue';
const goods=reactive({number: 0,name: '',price: 0});
const resgoods=reactive([{number: 1,name: '西瓜',price: 40},
  {number: 2,name: '南瓜',price: 35},
  {number: 3,name: '西葫芦',price: 66},
  {number: 4,name: '紫菜',price: 55},
  {number: 5,name: '香菜',price: 78},
  {number: 6,name: '十三香',price: 47},
  {number: 7,name: '娃娃菜',price: 37},
  {number: 8,name: '黄瓜',price: 54},
  {number: 9,name: '香蕉',price: 89},
  {number: 10,name: '香梨',price: 32},
]);
let total=ref(0);
let result=parseInt(total.value);
for (let i = 0; i < resgoods.length; i++) {
  result+=parseInt(resgoods[i].price);
  console.log(result);
}
total=result;
const addGoods=()=>{
  if (goods.number === 0 && goods.name === '' &&
      goods.price === 0) {
    alert('请输入商品信息！');
  } else {
    let ddd=resgoods.length+1
    resgoods.push({number: ddd,name: goods.name,price: goods.price})
  }
  let result1=parseInt(0);
  for (let i = 0; i < resgoods.length; i++) {
    result1+=parseInt(resgoods[i].price);
  }
  total=result1;
}

function del(index){
  resgoods.splice(index,1);
  let result2=parseInt(0);
  for (let i = 0; i < resgoods.length; i++) {
    result2+=parseInt(resgoods[i].price);
  }
  total=result2;
}
</script>

<template>
  <form action="" id="form">
    <p>
      <label>商品序号：</label>
      <input type="text" placeholder="请输入商品序号" v-model="goods.number" />
    </p>
    <p><label>商品名字：</label>
      <input type="text" placeholder="请输入商品名字" v-model="goods.name" />
    </p>
    <p>
      <label>商品单价：</label>
      <input type="text" placeholder="请输入商品单价" v-model="goods.price" />
      <br>
      <button type="button" @click="addGoods">添加商品</button>
    </p>
  </form>
  <hr>
  <p>搜索：<input type="text" v-model="keyword" placeholder="请输入查询关键字"></p>
  <table>
    <tr style="background-color: #0861e1;color: #fff;">
      <th>编号</th>
      <th>名称</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
    <tr v-for="(stu, index) in resgoods" :key="index">
      <td>{{stu.number}}</td>
      <td>{{stu.name}}</td>
      <td>￥{{stu.price}}</td>
      <td><a href="#" @click="del(index)">删除</a></td>
    </tr>
    <tr style="background-color: #0861e1;color: #fff;">
      <th colspan="4">当前显示结果{{ resgoods.length }}条</th>
    </tr>
    <tr>
      <td colspan="2">总价</td>
      <td colspan="2"><span style="font-size: 14px;color: red;">￥{{ total }}</span></td>
    </tr>
  </table>
</template>

<style scoped>

</style>